<template>
  <!-- 展示页面数据信息 -->
  <div class="info">
    <p>账户信息: {{ $store.state.user.info.profile.account }}</p>
    <p>
      修改密码:
      <span @click="type = true" style="color: deepskyblue">修改密码</span>
    </p>
    <p>名字: {{ $store.state.user.info.profile.name }}</p>
    <p>生日: {{ $store.state.user.info.profile.birthday }}</p>
    <p>性别: {{ $store.state.user.info.profile.sex == 1 ? "男" : "女" }}</p>
    <p>邮箱: {{ $store.state.user.info.profile.email }}</p>
    <p>电话: {{ $store.state.user.info.profile.phone }}</p>
    <p>
      部门:
      {{ $store.state.user.info.profile.dept == "" ? "战略部" : "技术部" }}
    </p>
    <p>
      <el-button type="danger" @click="logout">退出登录</el-button>
    </p>
    <setpass :type="type" :btn="btn"></setpass>
  </div>
</template>

<script>
import setpass from "../../components/info/setpass";
export default {
  data() {
    return {
      type: false,
    };
  },
  components: {
    setpass,
  },
  created() {
    // 开启动画
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    this.$nextTick(() => {
      // 结束动画
      setTimeout(() => {
        loading.close();
      }, 1000);
    });
  },
  methods: {
    btn() {
      this.type = false;
    },
    logout() {
      // 清除token验证
      localStorage.clear();
      // 跳转到登录页
      location.href = "/login.html";
    },
  },
};
</script>

<style scoped>
.info > p {
  line-height: 40px;
}
</style>